{{extend 'layout.html'}}
{{import urllib}}
{{block extra_head}}
{{def multiline(e): return XML('/<br/>'.join(('&nbsp'*i)+x for (i,x) in enumerate(e.split('/'))))}}
<!-- CSS Files -->
<link type="text/css" href="{{=URL('static','jit/Examples/css/base.css')}}" rel="stylesheet" />
<link type="text/css" href="{{=URL('static','jit/Examples/css/Sunburst.css')}}" rel="stylesheet" />
<!--[if IE]><script language="javascript" type="text/javascript" src="{{=URL('static','jit/Extras/excanvas.js')}}"></script><![endif]-->
<!-- JIT Library File -->
<script language="javascript" type="text/javascript" src="{{=URL('static','jit/jit.js')}}"></script>
<!-- Example File -->
<script language="javascript" type="text/javascript">
var labelType, useGradients, nativeTextSupport, animate;
(function() {
  var ua = navigator.userAgent,
      iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i),
      typeOfCanvas = typeof HTMLCanvasElement,
      nativeCanvasSupport = (typeOfCanvas == 'object' || typeOfCanvas == 'function'),
      textSupport = nativeCanvasSupport 
        && (typeof document.createElement('canvas').getContext('2d').fillText == 'function');
  //I'm setting this based on the fact that ExCanvas provides text support for IE
  //and that as of today iPhone/iPad current text support is lame
  labelType = (!nativeCanvasSupport || (textSupport && !iStuff))? 'Native' : 'HTML';
  nativeTextSupport = labelType == 'Native';
  useGradients = nativeCanvasSupport;
  animate = !(iStuff || !nativeCanvasSupport);
})();

var Log = {
  elem: false,
  write: function(text){
    if (!this.elem) 
      this.elem = document.getElementById('log');
    this.elem.innerHTML = text;
    this.elem.style.left = (500 - this.elem.offsetWidth / 2) + 'px';
  }
};


function init(){
  //init data
  var json = {
    "children": [
{{for k, (domain, status) in enumerate(domains):}}{{if k>0:}},{{pass}}
       {
         "children": [
         {{for kk,e in enumerate(ensembles[domain]):}}
            {{if kk>0:}},{{pass}}
            {
               "children": [],
               "data": {
                   "description":'{{=A(IMG(_src=URL('static','images/readmore.png'),_width="200px"),**{'_rel':'external','_data-inline':"true",'_data-role':"button",'_href':URL('ildg','ensemble',vars=dict(path=e))})}}',
                   "$color": "#AEA9F8",
                   "$angularWidth": 1000
                },
                "id": "{{=e}}",
                "name": "{{=multiline(e)}}"
            }
         {{pass}}
         ],
         "data": {
           "description": '{{=UL(*[A(x,_href=URL('ildg','ensemble',args=x)) for x in ensembles[domain]])}}',
           "$color": "{{='#AEA9F8' if status else '#dd3333'}}", 
           "$angularWidth": 1000
         }, 
         "id": "{{=domain}}", 
         "name": "{{=domain.upper()}}"
       }
{{pass}}
     ], 
     "data": { "$color": "#AEA9F8" }, 
     "id": "ILDG", 
     "name": "ILDG"
   };
    //end
    //init Sunburst
    var sb = new $jit.Sunburst({
        //id container for the visualization
        injectInto: 'infovis',
        //Distance between levels
        levelDistance: 90,
        //Change node and edge styles such as
        //color, width and dimensions.
        Node: {
          overridable: true,
          type: useGradients? 'gradient-multipie' : 'multipie'
        },
        //Select canvas labels
        //'HTML', 'SVG' and 'Native' are possible options
        Label: {
          type: labelType
        },
        //Change styles when hovering and clicking nodes
        NodeStyles: {
          enable: true,
          type: 'Native',
          stylesClick: {
            'color': '#33dddd'
          },
          stylesHover: {
            'color': '#dddd33'
          }
        },
        //Add tooltips
        Tips: {
          enable: true,
          onShow: function(tip, node) {
            var html = "<div class=\"tip-title\">" + node.name + "</div>"; 
            var data = node.data;
            tip.innerHTML = html;
          }
        },
        //implement event handlers
        Events: {
          enable: true,
          onClick: function(node) {
            if(!node) return;
            //Build detailed information about the file/folder
            //and place it in the right column.
            var html = "<h4>"+node.name+"</h4>", data = node.data;
            if("description" in data)
              html += "<div>" + data.description + "</div>";
            $jit.id('inner-details').innerHTML = html;
            //hide tip
            sb.tips.hide();
            //rotate
            sb.rotate(node, animate? 'animate' : 'replot', {
              duration: 1000,
              transition: $jit.Trans.Quart.easeInOut
            });
          }
        },
        // Only used when Label type is 'HTML' or 'SVG'
        // Add text to the labels. 
        // This method is only triggered on label creation
        onCreateLabel: function(domElement, node){
          var labels = sb.config.Label.type,
              aw = node.getData('angularWidth');
          if (labels === 'HTML' && (node._depth < 2 || aw > 2000)) {
            domElement.innerHTML = node.name;
          } else if (labels === 'SVG' && (node._depth < 2 || aw > 2000)) {
            domElement.firstChild.appendChild(document.createTextNode(node.name));
          }
        },
        // Only used when Label type is 'HTML' or 'SVG'
        // Change node styles when labels are placed
        // or moved.
        onPlaceLabel: function(domElement, node){
          var labels = sb.config.Label.type;
          if (labels === 'SVG') {
            var fch = domElement.firstChild;
            var style = fch.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontSize = "0.8em";
            fch.setAttribute('fill', "#fff");
          } else if (labels === 'HTML') {
            var style = domElement.style;
            style.display = '';
            style.cursor = 'pointer';
            style.fontSize = "0.8em";
            style.color = "#ddd";
            var left = parseInt(style.left);
            var w = domElement.offsetWidth;
            style.left = (left - w / 2) + 'px';
          }
        }
   });
    //load JSON data.
    sb.loadJSON(json);
    //compute positions and plot.
    sb.refresh();
    //end
}


</script>
<script>jQuery(function(){init()});</script>
{{end}}

<div id="container" class="black">
  <div id="center-container">
    <div id="infovis"></div>    
  </div>
  <div id="right-container">
    <div id="inner-details"></div>
  </div>
  <div id="log"></div>
</div>
